<template>
  <div class="wrapLimit clx main">
    <div class="commodityDetail">
      <el-form label-width="120px" class="form-baseinfo">
        <div class="commodityInfo">
          <p class="title">物料基本信息</p>
          <div class="info">
            <el-form-item label="物料简称">
              <el-input v-model="data.cName" readonly />
            </el-form-item>
            <el-form-item label="物料所属大类">
              <el-input v-model="data.childList[0].cName" readonly />
            </el-form-item>
            <el-form-item label="物料大类编码">
              <el-input v-model="data.childList[0].categoryNo" readonly />
            </el-form-item>
            <el-form-item label="物料所属中类">
              <el-input v-model="data.childList[0].childList[0].cName" readonly />
            </el-form-item>
            <el-form-item label="物料中类编码">
              <el-input v-model="data.childList[0].childList[0].categoryNo" readonly />
            </el-form-item>
            <el-form-item label="物料所属小类">
              <el-input v-model="data.childList[0].childList[0].childList[0].cName" readonly />
            </el-form-item>
            <el-form-item label="物料小类编码">
              <el-input v-model="data.childList[0].childList[0].childList[0].categoryNo" readonly />
            </el-form-item>
            <el-form-item label="上传物料图片">
              <el-image
                v-if="data.imagesList && data.imagesList.length > 0"
                style="width: 100px; height: 100px"
                :src="data.imagesList[0].imgesUrl"
                fit="cover"
              />
              <div v-else>暂无图片</div>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="commodityInfo">
        <p class="title">物料明细</p>
        <div class="info">
          <LPTablePage
            :show-index="true"
            :show-indexfixed="false"
            index-label="序号"
            :table-data="tableData"
            :table-column="tableColumn"
            :show-page="false"
            align="center"
          >
            <template slot="statusName" slot-scope="{ row }">
              <div v-if="row.statusName == '启用'">可售</div>
              <div v-else>不可售</div>
            </template>
            <template slot="cz" slot-scope="{ row }">
              <el-button type="text" @click="productLog(row.id)">操作日志</el-button>
            </template>
          </LPTablePage>
        </div>
      </div>

      <div class="commodityInfo">
        <p class="title">操作日志</p>
        <div class="info">
          <LPTablePage
            :show-index="true"
            :show-indexfixed="false"
            index-label="序号"
            :table-data="operationLogData"
            :table-column="operationLogColumn"
            :show-page="false"
            align="center"
          />
        </div>
      </div>

      <div class="form-baseinfo">
        <el-button class="button" size="medium" @click="back">关闭</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="商品操作明细" width="65%">
      <LPTablePage
        :show-index="true"
        :show-indexfixed="false"
        index-label="序号"
        :table-data="productLogData"
        :table-column="productLogColumn"
        :show-page="false"
        align="center"
      />
    </el-dialog>
  </div>
</template>

<script>
import { operationLog } from '@/api/LaborProtection/operationLog'
import { getByIdProduct } from '@/api/LaborProtection/categoryInfo'
import { getProductList } from '@/api/LaborProtection/product'
import { closeActiveTag } from '@/utils/lpUtils.js'
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  name: 'CommodityDetail',
  components: { LPTablePage },
  data() {
    return {
      id: '',
      dialogVisible: false,
      data: {
        cName: '',
        childList: [
          {
            cName: '',
            categoryNo: '',
            childList: [
              {
                cName: '',
                categoryNo: '',
                childList: [
                  {
                    cName: '',
                    categoryNo: ''
                  }
                ]
              }
            ]
          }
        ],
        imagesList: [
          {
            imgesUrl: ''
          }
        ]
      },
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '物料编码', prop: 'pNo' },
        { label: '物料名称', prop: 'pTitle' },
        // {label: "单位", prop: "unit"},
        { label: '单位', prop: 'pUnit' },
        { label: '价格', prop: 'pPrice' },
        { label: '状态', prop: 'statusName', render: true },
        { label: '操作', prop: 'cz', render: true }
      ],
      operationLogData: [],
      operationLogColumn: [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createName' },
        // {label: "单位", prop: "unit"},
        { label: '操作项', prop: 'remark' }
      ],
      productLogData: [],
      productLogColumn: [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createName' },
        // {label: "单位", prop: "unit"},
        { label: '操作项', prop: 'remark' }
      ]
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getByIdProduct()
    this.operationLog()
  },
  methods: {
    productLog(id) {
      const params = {
        SourceId: id
      }
      operationLog(params).then((res) => {
        this.productLogData = res.items
        this.dialogVisible = true
      })
    },
    getByIdProduct() {
      getByIdProduct(this.id).then((res) => {
        this.data = res
        this.getProductList()
      })
    },
    operationLog() {
      const params = {
        SourceId: this.id
      }
      operationLog(params).then((res) => {
        this.operationLogData = res.items
      })
    },
    getProductList() {
      const data = {
        PName: this.data.cName,
        PClassId: this.data.childList[0].childList[0].childList[0].id,
        SkipCount: 0
      }
      getProductList(data).then((res) => {
        this.tableData = res.items
      })
    },
    back() {
      closeActiveTag(this, '/laborProtection/commodityManage')
    }
  }
}
</script>

<style lang="scss" scoped>
.commodityDetail {
  margin: 0 45px;

  .form-baseinfo {
    .title {
      font-size: 16px;
      font-weight: 600;
    }

    ::v-deep .el-input__inner {
      width: 36%;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #d8d8d8;
    }
  }
}
::v-deep .el-form-item__label {
  text-align: left;
  font-weight: normal;
  color: #666666;
  line-height: 30px;
}

::v-deep .el-form-item__content {
  line-height: 30px;
}

::v-deep .el-form-item {
  height: 40px;
  // margin-bottom: 2px;
}

.remark {
  ::v-deep .el-input__inner {
    height: 90px;
  }
}
.commodityInfo {
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    // margin: 0 45px;
    border-bottom: 1px solid #ededed;

    .el-form-item {
      position: relative;
      top: 50%;
      // transform: translateY(-50%);
      width: calc(33%);
      height: 40px;
    }
  }
  .divide {
    width: 100%;
    margin-top: 30px;
  }
}
.collect {
  display: block;
  padding-left: 20px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f2f3f5;
}
.title {
  margin-left: 10px;
  padding: 20px 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    position: absolute;
    left: 45px;
    background: #0076ff;
  }
}

.log {
  .title {
    padding-bottom: 30px;
  }
}

.button {
  width: 100px;
  position: relative;
  left: 45%;
  top: 30px;
  margin: 0 40px;
  transform: translate(-50%);

  &:nth-of-type(1) {
    color: #333333;
    background-color: #fff;
  }
}
</style>
